import React, { useEffect } from 'react'
import $ from 'jquery'
import { Toast } from 'antd-mobile'
import { FeedbackCreator } from '../Redux/ActionCreator'
import { connect } from 'react-redux'

const FruiterFeedbackSearch = (props) => {
    useEffect(() => {
        props.dispatch(FeedbackCreator())
    }, []);

    var pageSize = 5;    //每页显示的记录条数
    var curPage = 0;        //当前页
    var lastPage;        //最后页
    var direct = 0;        //方向
    var len;            //总行数
    var page;            //总页数
    var begin;
    var end;

    const errToasttwo = () => {
        Toast.info('您还没有输入任何内容!', 2)
    }
    const errToastthree = () => {
        Toast.info('抱歉，未搜索到您想要的内容!', 2)
    }
    const newData = props.feedbackreducer.filter(
        item => !(item.feedback !==2)
    );
    
    $('#input').on('keypress', function (event) {
        if (event.keyCode == 13) {
            $('#start_search').trigger('click');
        }
    });

    $(document).ready(function display() {
        len = $(".mytable2 tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
        page = len % pageSize === 0 ? len / pageSize : Math.floor(len / pageSize) + 1;//根据记录条数，计算页数
        curPage = 1;    // 设置当前为第一页
        displayPage(1);//显示第一页

        $("#start_search").click(function changePage() { // 转页
            $('.tbody2 tr').css({ background: 'white' });
            if ($('#input').val() == '') {
                errToasttwo();
            }
            else {
                newData.map((item, index) => {
                    if ($('#input').val() == newData[index].feedback_id
                        || $('#input').val() == newData[index].business_id
                        || $('#input').val() == newData[index].business_name
                        || $('#input').val() == newData[index].business_email
                        || $('#input').val() == newData[index].business_phone
                        || $('#input').val() == newData[index].feedback_context
                    ) {
                        curPage = (index + 1) % pageSize === 0 ? (index + 1) / pageSize : Math.floor((index + 1) / pageSize) + 1;//根据记录条数，计算页数
                        direct = 0;
                        displayPage();
                        $('.tbody2 tr').eq(index).css({ background: '#f5dec0' });
                    }
                    else if (index == newData.length) {
                        errToastthree();
                        console.log(1)
                    }
                })
            }
        });

        len = $(".mytable2 tr").length - 1;
        page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1;//根据记录条数，计算页数
        curPage = 1;        //当前页
        direct = 0;        //方向
    });

    const displayPage = () => {
        if (curPage <= 1 && direct == -1) {
            direct = 0;
            return;
        } else if (curPage >= page && direct == 1) {
            direct = 0;
            return;
        }

        lastPage = curPage;

        document.getElementById("btn0").innerHTML = "当前 " + curPage + "/" + page + " 页 ";        // 显示当前多少页

        begin = (curPage - 1) * pageSize + 1;// 起始记录号
        end = begin + 1 * pageSize - 1;    // 末尾记录号

        if (end > len) end = len;
        $(".mytable2 tr").hide();    // 首先，设置这行为隐藏
        $(".mytable2 tr").each(function (i) {    // 然后，通过条件判断决定本行是否恢复显示
            if ((i >= begin && i <= end) || i == 0)//显示begin<=x<=end的记录
                $(this).show();
        });
    }
    return (
        <div>
            <input
                id='input'
                placeholder="搜索"
                autocomplete="off"
            />

            <i className='iconfont icon-sousuokuang'
                id='start_search'></i>
            <button id='abolish' onClick={() => document.getElementById('input').value = ''}>取消</button>
        </div >);
}
const mapStateToProps = (state) => ({
    feedbackreducer: state.feedbackreducer
})
export default connect(mapStateToProps)(FruiterFeedbackSearch);